@import '../../var';

.c-avatar {
  position: relative;
  width: 54rpx;
  height: 54rpx;

  &.lg {
    width: 84rpx;
    height: 84rpx;
  }
  &.xl {
    width: 120rpx;
    height: 120rpx;
  }
  &.l {
    width: 60rpx;
    height: 60rpx;
  }
  &.s {
    width: 48rpx;
    height: 48rpx;
  }
  &.sm {
    width: 40rpx;
    height: 40rpx;
  }
  &.ss {
    width: 36rpx;
    height: 36rpx;
  }
  &.full {
    width: 100%;
    height: 100%;
  }
  .vip {
    position: absolute;
    top: -10%;
    left: -10%;
    width: 40%;
    height: 40%;
  }
  .verify {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 35%;
    height: 35%;
  }
  .image {
    display: block;
    width: 100%;
    height: 100%;
    background: $bgcolor-gray center / cover no-repeat;

    &.circle {
      //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
      border-radius: 1000rpx;
    }
    &.fillet {
      width: 100%;
      height: 100%;
      //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
      border-radius: 10rpx;
    }
  }
}
